<!DOCTYPE HTML>
<html>
<head>
<title>Boomerang 使用方法 #2: 動的な読み込みのパフォーマンスを認識して測定する</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../boomerang-docs.css">
</head>
<body>
<span style="float:right;"><a href="../">ドキュメント一覧</a> | <a href="index.html">使用方法一覧</a></span>
<h1>Boomerang 使用方法 #2:<br>動的な読み込みのパフォーマンスを認識して測定する</h1>
<p>
この要件の説明は <a href="../use-cases.html#uc-2">ユースケース #2</a> をご覧ください。
</p>
<p>
このドキュメントは XHR を使っていくつかのコンテンツの読み込みを試し、boomerang を使ってそのコンテンツの読み込みかかった時間を測定します。次のようにして行ないます:
</p>
<ol>
<li>あなたのドキュメントルートに boomerang.js と images/ ディレクトリーをコピーします</li>
<li>次のコードをあなたのページの XHR を呼び出す前のどこかに追加します</li>
</ol>
<pre>
&lt;script src="boomerang.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
BOOMR.init({
		user_ip: "&lt;user's ip address&gt;",
		beacon_url: "http://yoursite.com/path/to/beacon.php",
		auto_run: false
	});
&lt;/script&gt;
</pre>

<p>
次にあなたのコンテンツを取得します。コンテンツの取得を呼び出す直前にタイマーが開始します。読み込み時間のタイマーは <code>t_done</code> と呼ばれます。コンテンツの取得が終わったときのコールバック関数の中で <code>done()</code> メソッドが呼び出されます。この測定とビーコンがレスポンスタイムを返します。以下は YUI 3 を使ったコードですが、あなたの好きな書き方をしてもいいです。
</p>

<pre>
YUI().use("io-base", function(Y) {
    var uri = "dynamic-content.txt";

    function complete(id, o) {
        var html = o.responseText;
	document.getElementById("dynamic-content").innerHTML = html;
	<em>BOOMR.plugins.RT.done();	// Tell boomerang to measure time and fire a beacon</em>
    };

    Y.on('io:complete', complete);

    <em>BOOMR.plugins.RT.startTimer("t_done");	// Start measuring download time</em>
    var request = Y.io(uri);
});
 </pre>

<p class="perma-link">
最新のソースコードとドキュメントは <a href="http://github.com/lognormal/boomerang/">github.com/lognormal/boomerang</a> に公開されています。
</p>

<p id="results">
</p>

<div id="dynamic-content">
</div>

<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-base-min.js&3.1.1/build/oop/oop-min.js&3.1.1/build/yui/yui-later-min.js&3.1.1/build/event-custom/event-custom-base-min.js&3.1.1/build/querystring/querystring-stringify-simple-min.js&3.1.1/build/io/io-base-min.js"></script>
<script src="../../../boomerang.js" type="text/javascript"></script>
<script src="../../howtos/howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
		user_ip: '10.0.0.1',
		BW: {
			base_url: '../../images/',
			cookie: 'HOWTO-BA'
		},
		RT: {
			cookie: 'HOWTO-RT'
		}
	});

YUI().use("io-base", function(Y) {
    var uri = "dynamic-content.txt?" + new Date().getTime();

    function complete(id, o) {
        var html = "<p>\n" + o.responseText.replace(/^$/mg, '</p>\n<p>') + "\n</p>";
	document.getElementById("dynamic-content").innerHTML = html;
	BOOMR.plugins.RT.done();
    };

    Y.on('io:complete', complete);

    BOOMR.plugins.RT.startTimer("t_done");
    var request = Y.io(uri);
});

</script>
</body>
</html>
<!--
    Copyright (c) 2011, Yahoo! Inc.  All rights reserved.
    Copyrights licensed under the BSD License. See the accompanying LICENSE.txt file for terms.
-->
